<template>
  <div class="tempering" :style="{ marginTop: top }">
    <div class="tempering_pedding ps_wait">
      正在钢化第<span class="temper_number" @click="gotoTemper">{{
        temperCount
      }}</span
      >炉
    </div>
    <div class="tempering_pedding ps_data">
      数量:<span style="color:#1f97e5;margin-right:5px">{{ checkNumber   }}</span>   面积:<span style="color:#1f97e5;margin-right:5px">{{ temperArea }}m²</span>   装载率:<span style="color:#1f97e5;margin-right:5px"> {{ loadSize }}%</span>
    </div>
    <div
      class="furnace_view"
      :style="{
        width: temperWidth + 'px',
      }"
    >
    </div>
    <div v-if="lineIndex == 1">
      <div
        class="titleName right"
        @click="handelrDataShow('GlassData')"
        v-if="GlassData.length != 0"
      >
        {{ GlassData.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName A301"
        @click="handelrDataShow('A301')"
        v-if="A301.length != 0"
      >
        {{ A301.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName A232"
        @click="handelrDataShow('A232')"
        v-if="A232.length != 0"
      >
        {{ A232.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName A31"
        @click="handelrDataShow('A31')"
        v-if="A31.length != 0"
      >
        {{ A31.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName A33"
        @click="handelrDataShow('A33')"
        v-if="A33.length != 0"
      >
        {{ A33.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A35')"
        v-if="A35.length != 0"
        :style="{ left: '130px', top: '30px' }"
      >
        {{ A35.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A36')"
        v-if="A36.length != 0"
        :style="{ left: '50px', top: '30px' }"
      >
        {{ A36.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A37')"
        v-if="A37.length != 0"
        :style="{ left: '-15px', top: '30px' }"
      >
        {{ A37.length }}
        <i class="el-icon-bottom arrow-down" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A38')"
        v-if="A38.length != 0"
        :style="{ left: '-15px', top: '100px' }"
      >
        {{ A38.length }}
        <i class="el-icon-bottom arrow-down" v-if="state"></i>
      </div>
    </div>
    <div v-if="lineIndex == 2">
      <div
        class="titleName"
        @click="handelrDataShow('A272')"
        :style="{ right: '5px', bottom: '15px' }"
        v-if="A272.length != 0"
      >
        {{ A272.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A233')"
        :style="{ right: '75px', bottom: '20px' }"
        v-if="A233.length != 0"
      >
        {{ A233.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A28')"
        :style="{ right: '155px', bottom: '15px' }"
        v-if="A28.length != 0"
      >
        {{ A28.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A30')"
        :style="{ right: '215px', bottom: '15px' }"
        v-if="A30.length != 0"
      >
        {{ A30.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A29')"
        :style="{ right: '265px', bottom: '15px' }"
        v-if="A29.length != 0"
      >
        {{ A29.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A32')"
        :style="{ right: '345px', bottom: '15px' }"
        v-if="A32.length != 0"
      >
        {{ A32.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A351')"
        :style="{ left: '130px', top: '30px' }"
        v-if="A351.length != 0"
      >
        {{ A351.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A361')"
        :style="{ left: '50px', top: '30px' }"
        v-if="A361.length != 0"
      >
        {{ A361.length }}
        <i class="el-icon-back arrow-left" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A39')"
        :style="{ left: '-15px', top: '30px' }"
        v-if="A39.length != 0"
      >
        {{ A39.length }}
        <i class="el-icon-bottom arrow-down" v-if="state"></i>
      </div>
      <div
        class="titleName"
        @click="handelrDataShow('A401')"
        :style="{ left: '-15px', top: '130px' }"
        v-if="A401.length != 0"
      >
        {{ A401.length }}
        <i class="el-icon-bottom arrow-down" v-if="state"></i>
      </div>
    </div>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="showData" @updateTable="updateTable" />
    </el-dialog>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg2"
      v-if="dialogVisibleEdg2"
      :header-cell-style="{ 'text-align': 'center' }"
      width="45%"
    >
      <GlassInfo :glass="showGlass" @closeDialog="dialogVisibleEdg2 = false" />
    </el-dialog>
  </div>
</template>

<script>
import glassTable from "@/views/components/production/glassTable.vue";
import { mark, temperMark } from "@/api/production/operation";
import WH from "@/views/iFactory/tempering/config/temper_W_H";
import GlassInfo from "@/views/components/production/glassInfo.vue";
export default {
  components: {
    glassTable,
    GlassInfo,
  },
  props: {
    lineIndex: {
      type: [Number, String],
      default: 0,
    },
    top: {
      type: String,
      default: "0%",
    },
    GlassData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A232: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A301: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A31: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A33: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A272: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A233: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A28: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A30: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A29: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A32: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A35: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A36: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A37: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A38: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A351: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A361: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A39: {
      type: Array,
      default: () => {
        return [];
      },
    },
    A401: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dialogVisibleEdg: false,
      dialogVisibleEdg2: false,
      showData: null,
      temperCount: null,
      timer: null,
      state: true,
      timerB: null,
      updateKey: "",
      furnaceData: [],
      WH,
      showGlass: null,
    };
  },
  methods: {
    opneInfo(item) {
      this.showGlass = item;
      console.log(item);
      this.dialogVisibleEdg2 = true;
    },
    updateTable() {
      this.showData = this[this.updateKey];
    },
    handelrDataShow(data) {
      this.updateKey = data;
      this.showData = this[data];
      this.dialogVisibleEdg = true;
    },
    getTemperData() {
      let params = {
        temperNumber: params,
        temperId: this.lineIndex,
      };
      temperMark(params).then((res) => {
        this.temperCount = res.maxTemper - 1;
        params.temperNumber = this.temperCount;
        // this.furnaceData = res.data;
        temperMark(params).then((res) => {
          this.furnaceData = res.data;
        });
      });
    },
    gotoTemper() {
      this.$router.replace({
        name: "Tempering",
        query: { id: 1, orderId: this.lineIndex },
      });
    },
  },
  computed: {
    temperWidth() {
      return this.lineIndex == 2 ? 220 : 280;
    },
    checkNumber() {
      return this.furnaceData.length;
    },
    temperArea() {
      if (this.furnaceData.length == 0) return 0;
      return (
        this.furnaceData.reduce((pre = 0, cur) => {
          return pre + cur.furInWidth * cur.furInHeight;
        }, 0) / 1000000
      ).toFixed(2);
    },
    loadSize() {
      if (this.furnaceData.length == 0) return 0;
      return (
        this.temperArea /
        ((this.WH[this.lineIndex - 1].width * this.WH[this.lineIndex - 1].height) /
          100000000)
      ).toFixed(2);
    },
  },
  created() {
    this.getTemperData();
    this.timer = setInterval(() => {
      this.getTemperData();
    }, 30000);
    this.timerB = setInterval(() => {
      this.state = !this.state;
    }, 500);
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.timerB);
  },
};
</script>

<style scoped>
.furnace_view {
  position: absolute;
  top: -3px;
  left: 30%;
  width: 280px;
  height: 87%;
}
.furnaceGlass {
  position: absolute;
  background-color: #23a8f2;
  cursor: pointer;
}
.arrow-left {
  position: absolute;
  bottom: -30px;
  color: red;
  font-size: 30px;
}
.arrow-down {
  position: absolute;
  left: -30px;
  color: red;
  font-size: 30px;
}

.ps_wait {
  position: absolute;
  letter-spacing: 3px;
  top: -30px;
  left: 35%;
}
.ps_data {
  position: absolute;
  letter-spacing: 1px;
  bottom: -23px;
  left: 35%;
  font-size: 14px;
}

.PS_TEXT {
  position: absolute;
  top: -40px;
  left: 65%;
}

.tempering {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.titleName {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column-reverse;
  z-index: 999;
  margin-left: 30px;
  background-color: #23a8f2;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.car_views {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.tempering_ending,
.tempering_start {
  width: 30%;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  letter-spacing: 0.5px;
}

.box {
  width: 50px;
  height: 50px;
}

.number {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car_views_wait {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 35px;
}

.tempering_pedding {
  font-weight: bold;
  width: 40%;
  height: 30%;
  font-size: 16px;
}

.temper_number {
  cursor: pointer;
  font-size: 24px;
  margin: 0 5px;
  color: #1f88da;
}

.temper_number:hover {
  text-decoration: underline;
}

.right {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.A232 {
  position: absolute;
  bottom: 10px;
  right: 80px;
}

.A301 {
  position: absolute;
  bottom: 10px;
  right: 145px;
}

.A31 {
  position: absolute;
  bottom: 10px;
  right: 215px;
}

.A33 {
  position: absolute;
  bottom: 10px;
  right: 280px;
}
</style>
